<script setup lang="ts">
import { inject, ref } from "vue"
import { showNotify } from 'vant'
const axios: any = inject("axios")
const service = axios.create()
const apiroot = import.meta.env.VITE_ROOTAPIURL + "api/Game/";
let gameType: any = ref("")
let gameTypeName: any = ref("")
let gameCondition: any = ref("花")
let createshow: any = ref(false)
let playshow: any = ref(false)
let computerAnswer: any = ref("")
let myAnswer: any = ref("")
let gameid: any = ""
let answers: any = ref([])
let popshow: any = ref(false)
let showoverlay: any = ref(false)
const options = [{ text: "飞花令", value: "Feihualing" }, { text: "接龙", value: "Jielong" }, { text: "对诗", value: "Duishi" }]
const cascaderValue = ref('');
async function createGame() {
  computerAnswer.value = ""
  answers.value=[]
  myAnswer.value = ""
  showoverlay.value=true
  let res = await service.post(apiroot+"CreateGame", {
    UserName: "我自己",
    GameType: gameType.value,
    GameSubType: "",
    GameCondition: gameCondition.value
  }).catch(function(error:any){
    console.log(error)
    showNotify({ message: error.message });
    showoverlay.value=false
    return
  })
  createshow.value = false
  showoverlay.value=false
  console.log(res)
  if (res.data.success) {
    playshow.value = true
    computerAnswer.value = res.data.computerAnswer
    answers.value.push(computerAnswer.value)
    gameid = res.data.gameId
  } else {
    showNotify({ message: "创建失败" });
  }

}
async function answer() {
  answers.value.push(myAnswer.value)
  showoverlay.value=true
  let res = await service.post(apiroot+"Play", {
    UserName: "我自己",
    GameId: gameid,
    Answer: myAnswer.value
  })
  showoverlay.value=false
  if (res.data) {
    computerAnswer.value = res.data.computerAnswer
    myAnswer.value = ""
    answers.value.push(computerAnswer.value)
    if (res.data.isGameDone) {
      answers.value.push("游戏结束")
    }

  } else {
    alert("err")
  }
}

const onFinish=(selectedOptions:any)=>{
  popshow.value=false
  console.log(selectedOptions)
  gameType.value=selectedOptions.value;
  gameTypeName.value=selectedOptions.selectedOptions[0].text
 
}
</script>

<template>
  <div>
    <van-overlay :show="showoverlay">
      <span>正在处理...</span>
    </van-overlay>
    <div v-show="createshow">

      <van-cell-group inset>
        <van-field v-model="gameTypeName" is-link readonly label="游戏类型" placeholder="请选择游戏类型" @click="popshow = true" />
        <van-field v-model="gameCondition" label="游戏条件" placeholder="" />
        <van-button type="warning" :round="true" @click="createGame">创建游戏</van-button>
      </van-cell-group>
    </div>
    <van-button type="success" :round="true" @click="createshow = true" v-show="!createshow">创建并开始游戏</van-button>
    <div v-show="playshow">
      <van-cell v-for="item in answers" :key="item" :title="item" />
      <van-cell-group inset>
        <van-field v-model="myAnswer" label="我的作答" placeholder="" />
        <van-button type="warning" :round="true" @click="answer">作答</van-button>
      </van-cell-group>
    </div>
    <van-popup v-model:show="popshow" round position="bottom">
      <van-cascader v-model="cascaderValue" title="请选择游戏类型" :options="options" @close="popshow = false"
        @finish="onFinish" />
    </van-popup>
  </div>
</template>


